<template>
  <!-- HTML结构: 要求template里面，有且只有一个根标签 -->
  <div>
    <h2>这是根组件</h2>
    <!-- 插值表达式 也叫做大胡子，小胡子语法 -->
    <p>姓名: {{ uname.toUpperCase() + '你好' }}</p>
    <p>年龄: {{ age }}</p>
    <p> {{ flag ? '111111' : '222222' }}</p>
    <p v-html="intro">简介：</p>
  </div>
</template>

<script>
  //JavaScript
  export default {
    //对象里面可以写很多东西，比如 data、methods、computed、watch、components.....
    // data 用于存储数据，写法上要求data定义成函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
    data () {
      return {
        // 页面中用到的数据，都放到这里
        uname:  "zhangsan",
        age: 30,
        flag: true,
        intro: "这是一个<strong>非常优秀</strong>的boy",
      }
    }
  }
</script>

<style>
  /* css样式 */
</style>
